import React, { useState, createContext } from 'react';
import ThemeButton from './useContextChild'
const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

// 为当前 theme 创建一个 context
export const ThemeContext = createContext();

export default function Toolbar(props) {
  const [theme, setTheme] = useState(themes.dark);

  const toggleTheme = () => {
    // setTheme方法中 currentTheme 是theme当前的值
    setTheme(currentTheme => (
      currentTheme === themes.dark
        ? themes.light
        : themes.dark
    ));
  };

  return (
    // 使用 Provider 将当前 props.value 传递给内部组件
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <ThemeButton />
    </ThemeContext.Provider>
  );
}
